<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="/src/main/webapp/staticin/webapp/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style type="text/css">
        /* 去除所有的页边距 */
        *{
            margin:0px;
            padding:0px;
        }
        /* 设置一个背景颜色 */
        body{
            background-color: #DFF0D8;
        }
        /*#titletab{*/
        /*    background-color: #ffffff;*/
        /*}*/
        /*去掉按钮点中后出现的深黑色边框(现在还有一点点，但是不影响美观)*/
        .btn:focus,
        .btn:active:focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn.active.focus {
            outline: none;
        }
        /*时间日历插件的设置*/
        .date-input{padding-left: 0px; height: 30px; width: 165px; line-height: 30px; border: 1px solid #e6e6e6;  background-color: #fff;  border-radius: 2px;}

    </style>

</head>

<body >
<div class="container" style=" margin-top:10px;">
    <!--        标题部分-->
    <div class="row clearfix" id="titletab">
        <div class="col-md-12 column">
            <ul class="layui-nav layui-bg-green" lay-filter="">
                <!--                    class="layui-this" 使得按钮处于选中-->
                <li class="layui-nav-item layui-this"><a href="">首页</a></li>
                <li class="layui-nav-item"><a href="/pages/客房管理.html">客房管理</a></li>
                <li class="layui-nav-item"><a href="/pages/会员管理.html">会员管理</a></li>
                <li class="layui-nav-item"><a href="/pages/商品管理.html">商品管理</a></li>
                <li class="layui-nav-item"><a href="/pages/员工管理.html">员工管理</a></li>
                <li class="layui-nav-item"><a href="/pages/系统日志.html">系统日志</a></li>
            </ul>
        </div>
    </div>

    <!--        主体部分-->
    <div class="row clearfix" style="margin-top:5px;">
        <!--        左侧占8列-->
        <div class="col-md-8 column">
            <table>
                <thead>
                <tr >
                    <div  class="form-inline row">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <div class="btn-group" role="group" aria-label="...">
                            <!--                        默认 按房间号排序 所以第一个active -->
                            <button type="button" class="btn btn-info active" id="sort-left">按房间号排序</button>
                            <button type="button" class="btn btn-default" id="sort-right">按状态排序</button>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                        <an style="white-space: nowrap;font-size:16px">日期:</an>
                        <!--            时间轴-->
                        <input type="text" class="date-input" id="date_input">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <!--                        <div class="input-group">-->
                        <!--                            <input type="text" class="form-control" placeholder="输入房号">-->
                        <!--                            <span class="input-group-btn">-->
                        <!--											<button class="btn btn-default" type="button">检索</button>-->
                        <!--                            </span>-->
                        <!--                        </div>&lt;!&ndash; /input-group &ndash;&gt;-->
                    </div>
                </tr>
                </thead>
                <tbody id="tbody">

                </tbody>
            </table>



        </div>

        <!--        右侧占4列-->
        <div class="col-md-4 column">
            <!--            上半部分-->
            <div class="uphalf" style="margin-top: 15px;">
                <div class="title"style="text-align: center;font-size: 24px;">当前所选房间|房间总状态</div>
                <table class="table" style="margin-top: 20px;font-size: 16px;">
                    <tr style="height: 50px;line-height:50px;">
                        <td style="line-height:50px;">房间编号：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_num"></div></td>
                        <td style="line-height:50px;">房间状态：</td>
                        <td style="line-height:50px;font-size: 14px;"> <div id="r_state"></div> </td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="line-height:50px;">房间类型：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_type"></div></td>
                        <td style="line-height:50px;">房间区域：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_place"></div></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="line-height:50px;">宾客姓名：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_name"></div></td>
                        <td style="line-height:50px;">预付押金：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_deposit"></div></td>
                    </tr>
                    <tr style="height: 50px;">
                        <td style="line-height:50px;">开房时间：</td>
                        <td style="line-height:50px;font-size: 14px;"><div id="r_time_in"></div> </td>
                        <td style="line-height:50px;">预离时间：</td>
                        <td style="line-height:50px;font-size: 14px;"> <div id="r_time_out"></div></td>
                    </tr>
                </table>
                &nbsp; &nbsp; &nbsp;
            </div>
            <!--真的服了为啥都会换行啊  吐了-->
            <div style="background: skyblue;"><font color="black" size="4">消费明细</font></div>

            <div style="height:320px; overflow-y:auto;">
                <table class="table-striped table-bordered table" style="height:50px;text-align: center;">
                    <thead>
                    <tr>
                        <td>序号</td>
                        <td>项目名称</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>金额</td>
                    </tr>
                    </thead>

                    <tbody id="buyList">
                    </tbody>
                </table>
            </div>

            <div style="background: skyblue;">
                <table>
                    <tr>
                        <td><font color="black" size="4">消费金额：</font></td>
                        <td width="35px" style="text-align: center">
                            <div id="total"  style="font-size: 17px">0</div>
                        </td>
                        <td><div  style="font-size: 17px">元</div></td>
                        <td width="135px"></td>

                        <td>
                            <div class="buy" style="float:right">
                                <button type="button" class="btn btn-info" onclick='showBuyModel()'>继续购买</button>
                            </div>
                        </td>

                    </tr>
                </table>
            </div>

        </div>

        <!-- 这里是入住弹窗 -->
        <!-- fade代表缓缓滑下 -->
        <div id="ruzhuModal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!-- 标题 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div class="form-inline row" style="margin-bottom: -10px;">
                            <h4 class="modal-title col-lg-4" id="gridSystemModalLabel">入住登记</h4>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group ">
                                <input type="text" class="form-control" id="ruzhuText" placeholder="输入身份证ID">
                                <span class="input-group-btn">
											<button class="btn btn-default " id="ruzhuSearch" type="button" onclick="search(this.id)">检索</button>
										</span>
                            </div><!-- /input-group -->
                        </div>

                    </div>
                    <!-- 主体 -->
                    <div class="modal-body">
                        <!-- 输入姓名和电话 -->
                        <div class="form-inline form-group form-group-lg">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon">姓名：</span>
                                <input type="text" class="form-control" placeholder="Roomername" id="Roomername" aria-describedby="sizing-addon2">
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">电话：</span>
                                <input type="text" class="form-control" placeholder="Phone Number" id="PhoneNumber" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <!-- 性别和身份证 -->
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">性别：</span>
                                <div>
                                    <select name="sex" id="sex" class="form-control">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">身份证：</span>
                                <input type="text" class="form-control" placeholder="IDNumber" id="IDNumber" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">是否为会员：</span>
                                <div>
                                    <select name="isVip" id="isVip" class="form-control">
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">押金：</span>
                                <input type="text" class="form-control" placeholder="deposit" id="deposit" aria-describedby="sizing-addon2">
                            </div>
                        </div>

                    </div>
                    <!-- 结尾 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info " id="btn_reg" data-dismiss="modal"  onclick="regModel(this.id)">确定</button>
                        <button type="reset" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 这里是预定的输入弹窗 -->
        <!-- fade代表隐藏 -->
        <div id="yudingModal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!-- 标题 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div class="form-inline row" style="margin-bottom: -10px;">
                            <h4 class="modal-title col-lg-4" >预定登记</h4>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group ">
                                <input type="text" class="form-control" id="yudingText" placeholder="输入身份证ID">
                                <span class="input-group-btn">
											<button class="btn btn-default" id="yudingSearch" type="button" onclick="search(this.id)">检索</button>
										</span>
                            </div><!-- /input-group -->
                        </div>

                    </div>
                    <!-- 主体 -->
                    <div class="modal-body">
                        <!-- 输入姓名和电话 -->
                        <div class="form-inline form-group form-group-lg">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon">姓名：</span>
                                <input type="text" class="form-control" placeholder="Roomername" id="Roomername_yu" aria-describedby="sizing-addon2">
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">电话：</span>
                                <input type="text" class="form-control" placeholder="Phone Number" id="PhoneNumber_yu" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <!-- 性别和身份证 -->
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">性别：</span>
                                <div>
                                    <select name="sex" id="sex_yu" class="form-control">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">身份证：</span>
                                <input type="text" class="form-control" placeholder="IDNumber" id="IDNumber_yu" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">是否为会员：</span>
                                <div>
                                    <select name="isVip" id="isVip_yu" class="form-control">
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">押金：</span>
                                <input type="text" class="form-control" placeholder="deposit" id="deposit_yu" aria-describedby="sizing-addon2">
                            </div>
                        </div>

                    </div>
                    <!-- 结尾 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info " id="btn_reg_yu" data-dismiss="modal" onclick="regModel(this.id)">确定</button>
                        <button type="reset" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->


        <!-- 这里是预定的确认弹窗 -->
        <!-- fade代表隐藏 -->
        <div id="yudingModal2" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!-- 标题 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div class="form-inline row" style="margin-bottom: -10px;">
                            <h4 class="modal-title col-lg-4" >入住确认</h4>
                        </div>

                    </div>
                    <!-- 主体 -->
                    <div class="modal-body">
                        <!-- 输入姓名和电话 -->
                        <div class="form-inline form-group form-group-lg">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon">姓名：</span>
                                <input type="text" class="form-control" placeholder="Roomername" id="Roomername_yu2" aria-describedby="sizing-addon2">
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">电话：</span>
                                <input type="text" class="form-control" placeholder="Phone Number" id="PhoneNumber_yu2" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <!-- 性别和身份证 -->
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">性别：</span>
                                <div>
                                    <select name="sex" id="sex_yu2" class="form-control">
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">身份证：</span>
                                <input type="text" class="form-control" placeholder="IDNumber" id="IDNumber_yu2" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon" style="width: 60px;">是否为会员：</span>
                                <div>
                                    <select name="isVip" id="isVip_yu2" class="form-control">
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </div>
                            </div>
                            &nbsp;&nbsp;
                            <div class="input-group col-lg-6">
                                <span class="input-group-addon">押金：</span>
                                <input type="text" class="form-control" placeholder="deposit" id="deposit_yu2" aria-describedby="sizing-addon2">
                            </div>
                        </div>

                    </div>
                    <!-- 结尾 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info " id="btn_reg_yu2" data-dismiss="modal" onclick="yudingToruzhu()">确定</button>
                        <button type="reset" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 这里是退房结账弹窗 -->
        <!-- fade代表隐藏 -->
        <div id="tuifangModal" class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <!-- 标题 -->
                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <div class="form-inline row" style="margin-bottom: -10px;">
                            <h4 class="modal-title col-lg-3">退房结账</h4>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-3">
                                <span class="input-group-addon">房客:</span>
                                <input type="text" class="form-control" disabled="true" value="欣雅雅" id="tuifangName" aria-describedby="sizing-addon2">
                            </div>
                            <div class="input-group col-lg-3">
                                <span class="input-group-addon">是否为会员:</span>
                                <input type="text" class="form-control" disabled="true" value="是" id="tuifangIsVip" aria-describedby="sizing-addon2">
                            </div>
                        </div>
                    </div>

                    <!-- 主体 -->
                    <div class="modal-body" id="tuifang-body">
                        <!-- 账单 -->
                        <div class="panel panel-default">
                            <!-- 账单标题 -->
                            <div class="panel-heading">消费账单</div>
                            <!--账单主体 -->
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>项目名称</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>金额</th>
                                </tr>
                                </thead>
                                <!--                                这里之后要被重写-->
                                <tbody id="tuifangTable">
                                <tr>
                                    <th scope="row">1</th>
                                    <td>总统套间</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <th scope="row">2</th>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                    <td>@mdo</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 消费金额与押金，内容需要赋值 -->
                        <div class="form-inline form-group form-group-lg ">
                            <!-- 用空格来调整下位置 -->
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon">总消费金额：</span>
                                <input type="text" class="form-control" disabled="true" value="600" id="tuifangNum" aria-describedby="sizing-addon2">
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <div class="input-group col-lg-5">
                                <span class="input-group-addon">已付押金：</span>
                                <input type="text" class="form-control" disabled="true" value="300" id="tuifangDeposit" aria-describedby="sizing-addon2">
                            </div>
                        </div>

                        <div  id="tuifang-btn">

                        </div>
                        <!--                        下面两个组件需要判定情况，押金<消费金额or...-->
                        <!--                        之后会补充上来-->

                    </div>
                    <!-- 结尾 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info " id="btn_reg_tuifang" data-dismiss="modal" onclick="clearBuy()">确定</button>
                        <button type="reset" class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <!-- 购买弹窗 -->
        <div id="buyModal" class="modal fade">
            <div class="modal-dialog " role="document">
                <div class="modal-content">

                    <!--模态框的头-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">本店提供的商品</h4>
                    </div>

                    <!--模态框的主体部分-->
                    <div class="modal-body" style="height: 400px;overflow-y:auto;">
                        <table id="goods_list" class="table table-bordered">
                            <thead>
                            <tr>
                                <td>商品编号</td>
                                <td>商品名称</td>
                                <td>单价</td>
                                <td>商品类别</td>
                                <td>购买数量</td>
                            </tr>
                            </thead>
                            <tbody id="goodsinfo">

                            </tbody>
                        </table>

                    </div>
                    <div class="modal-footer">            <!--模态框的尾巴 用来放按钮-->
                        <button type="button" class="btn btn-default" id="closeDilog" onclick="cashier()">确定</button>
                    </div>

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>


</body>
<script src="/src/main/webapp/staticin/webapp/static/jquery/jquery-3.4.1.min.js"></script>
<script src="/src/main/webapp/staticin/webapp/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/layui/layui.js"></script>
<script type="text/javascript">
    //refresh函数被 sort函数取代了
    // function refresh() {
    //     //从数据库t_room_info中导出数据并生成对应数量的方块
    //     // jQuery.ajax({type:"POST",async:false,url:"/room_all",dataType:"json",success:function(rst) {
    //     jQuery.post("/room_all",function (rst) {//处理响应的结果
    //         var body = "";
    //         for (var i = 0; i < rst.length; i++) {
    //             if (i % 7 == 0)//七个方块一行
    //                 body += "<tr height=\"120px\">";
    //             body += "<td>";
    //             body += "<div class=\"room\" style=\"margin-left:5px;\">";
    //
    //             var json = rst[i];
    //             // alert(json.room_num);
    //             //获得当前选择得日期
    //             var time_in = $("#date_input").val();
    //             var day=time_in.split("-")[2]
    //             var month=time_in.split("-")[1]
    //             var year=time_in.split("-")[0]
    //             //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
    //             var nowDate = new Date();
    //             var nowDay = nowDate.getDate();
    //             var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
    //             var nowYear = nowDate.getFullYear();
    //
    //             //比较时间
    //             var flag="";
    //             if(year<nowYear)
    //                 flag="before";
    //             else if(year>nowYear)
    //                 flag="after";
    //             else{//年份相等
    //                 if(month<nowMonth)
    //                     flag="before";
    //                 else if(month>nowMonth)
    //                     flag="after";
    //                 else{//月份也相等
    //                     if(day<nowDay)
    //                         flag="before";
    //                     else if(day>nowDay)
    //                         flag="after";
    //                     else
    //                         flag="now";
    //                 }
    //             }
    //
    //             //获得表格索引名称
    //             var num = json.room_num;
    //             var tableName = "t_" + num + "_info";
    //             // alert(num);
    //             //async:false是设置同步访问
    //             jQuery.ajax({
    //                 type: "POST",
    //                 async: false,
    //                 url: "/roomstatus_findbydate",
    //                 dataType: "json",
    //                 data: {"tableName": tableName, "time_in": time_in},
    //                 success: function (mmm) { // 请求成功时的回调函数
    //                     // jQuery.post("/roomstatus_findbydate",{"tableName":tableName,"date":date},function (mmm) {
    //                     // alert(tableName+"   "+date+"   "+mmm.roomStatus);
    //                     //如果为空，即对应日期没有预定或入住
    //                     if (mmm.roomStatus == "空闲") {
    //                         body += "<img src=\"/img/白方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\">";
    //                         body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
    //                         body += num;
    //                         body += "</h3>";
    //                         body += "<h3 style=\"margin-top:5px;margin-left:35px\">空闲</h3>";
    //                         //日期不同，按钮可能不可用
    //                         if(flag=="before"){//不能预定，不能入住
    //                             body += "<button type='button'  disabled='disabled' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
    //                             body += "<button type='button'  disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
    //                         }else if(flag=="now"){//可以预定，可以入住
    //                             body += "<button type='button'  class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
    //                             body += "<button type='button'  class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
    //                         }else if(flag=="after"){//可以预定，不可入住
    //                             body += "<button type='button' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
    //                             body += "<button type='button' disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
    //                         }
    //                     } else if (mmm.roomStatus == "已入住") {
    //
    //                         body += "<img src=\"/img/灰方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\">";
    //                         body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
    //                         body += num;
    //                         body += "</h3>";
    //                         body += "<h3 style=\"margin-top:5px;margin-left:25px\">已入住</h3>";
    //                         //啥收都可以结账
    //                         body += "<button type=\"button\" class=\"btn btn-info\" style=\"font-size:13px;margin-left:35px;margin-top:10px;\">退房</button>";
    //                     } else if (mmm.roomStatus == "已预定") {
    //                         body += "<img src=\"/img/褐方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\">";
    //                         body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
    //                         body += num;
    //                         body += "</h3>";
    //                         body += "<h3 style=\"margin-top:5px;margin-left:25px\">已预定</h3>";
    //                         //日期不同，按钮可能不可用
    //                         if(flag=="now")//当天可入住,其余时间不可入住
    //                             body += "<button type='button' class='btn btn-info' id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";
    //                         else
    //                             body += "<button type=\"button\" disabled='disabled' class=\"btn btn-info\" id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";
    //                     }else if (mmm.roomStatus == "已结账") {
    //                         body += "<img src=\"/img/褐方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\">";
    //                         body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
    //                         body += num;
    //                         body += "</h3>";
    //                         body += "<h3 style=\"margin-top:5px;margin-left:25px\">已结账</h3>";
    //                         body += "<h4 style=\"margin-top:20px;margin-left:25px\">欢迎下次光临</h4>";
    //                     }
    //
    //                 }
    //             });
    //             body += "</div>";
    //             //每一个都有</td>
    //             body += "</td>";
    //             if ((i + 1) % 7 == 0 || i == rst.length - 1)
    //                 body += "</tr>";
    //         }
    //         jQuery("#tbody").html(body);
    //     });
    // }

    //初始化创建所有表
    function init() {
        jQuery.ajax({type: "POST", async: false,url:"/room_all",dataType: "json",function (rst) {//处理响应的结果
                for(var i=0;i<rst.length;i++){
                    var json=rst[i];

                    //获得表格索引名称
                    var num = json.room_num;
                    //先新建表，防止不存在
                    jQuery.ajax({
                        type: "POST", async: false,url: "/roomstatus_create",dataType: "json", data: {"tableName": num},
                        success: function (mmm) {}});
                    jQuery.ajax({
                        type: "POST", async: false,url: "/roomBuy_create",dataType: "json", data: {"tableName": num},
                        success: function (mmm) {}});
                }
            }
        });
    }
    //排序函数（因为排序要刷新主体，所以可以用来替代refresh函数，且在切换日期时保持原有排序策略
    function sort(){

        //如果左侧为active,即按房间号排序
        if($("#sort-left").hasClass("active")){
            //从数据库t_room_info中导出数据并生成对应数量的方块
            // jQuery.ajax({type:"POST",async:false,url:"/room_all",dataType:"json",success:function(rst) {
            jQuery.post("/room_all",function (rst) {//处理响应的结果

                var map={};
                for(var i=0;i<rst.length;i++)
                    map[rst[i].room_num]=i;//key为room_num，value为索引 i
                var a=[];//辅助排序
                $.each(map, function(key, val) { a[a.length] = key;  });//把key赋给a[]
                a.sort();//按key排序


                var body = "";
                $.each(a,function (i,key) {//i是从0开始的计数器，key是是上面的room_num
                    var json=rst[map[key]]; //获取到map[key]对应的索引值，然后再获取rst[i]

                    if(i==0)
                        roomStatus(json.room_num);//初始化右侧栏
                    if (i % 6 == 0)//6个方块一行
                        body += "<tr height=\"120px\">";
                    body += "<td>";
                    body += "<div class=\"room\" style=\"margin-left:5px;\">";


                    var time_in = $("#date_input").val();
                    var day=time_in.split("-")[2]
                    var month=time_in.split("-")[1]
                    var year=time_in.split("-")[0]
                    //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
                    var nowDate = new Date();
                    var nowDay = nowDate.getDate();
                    var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
                    var nowYear = nowDate.getFullYear();

                    //比较时间
                    var flag="";
                    if(year<nowYear)
                        flag="before";
                    else if(year>nowYear)
                        flag="after";
                    else{//年份相等
                        if(month<nowMonth)
                            flag="before";
                        else if(month>nowMonth)
                            flag="after";
                        else{//月份也相等
                            if(day<nowDay)
                                flag="before";
                            else if(day>nowDay)
                                flag="after";
                            else
                                flag="now";
                        }
                    }

                    //获得表格索引名称
                    var num = json.room_num;
                    var tableName = "t_" + num + "_info";
                    // alert(num);

                    //async:false是设置同步访问
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/roomstatus_findbydate",
                        dataType: "json",
                        data: {"tableName": tableName, "time_in": time_in},
                        success: function (mmm) { // 请求成功时的回调函数
                            // jQuery.post("/roomstatus_findbydate",{"tableName":tableName,"date":date},function (mmm) {
                            // alert(tableName+"   "+date+"   "+mmm.roomStatus);
                            //如果为空，即对应日期没有预定或入住
                            if (mmm.roomStatus == "空闲") {
                                body += "<img src='/src/main/webapp/staticin/webapp/static/img/白方块.png'  class='img-rounded' width='120' height='120' id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:35px\">空闲</h3>";
                                //日期不同，按钮可能不可用
                                if(flag=="before"){//不能预定，不能入住
                                    body += "<button type='button'  disabled='disabled' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button'  disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }else if(flag=="now"){//可以预定，可以入住
                                    body += "<button type='button'  class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button'  class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }else if(flag=="after"){//可以预定，不可入住
                                    body += "<button type='button' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button' disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }
                            } else if (mmm.roomStatus == "已入住") {
                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/蓝方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已入住</h3>";
                                //啥收都可以结账
                                body += "<button type=\"button\" class=\"btn btn-info\" id='"+num+"_tuifang' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showTuifangModel(this.id)'>退房</button>";
                            } else if (mmm.roomStatus == "已预定") {
                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/粉方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已预定</h3>";
                                //日期不同，按钮可能不可用
                                if(flag=="now")//当天可入住,其余时间不可入住
                                    body += "<button type='button' class='btn btn-info' id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";
                                else
                                    body += "<button type=\"button\" disabled='disabled' class=\"btn btn-info\" id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";
                            }else if (mmm.roomStatus == "已结账") {
                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/灰方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已结账</h3>";
                                body += "<h4 style=\"margin-top:20px;margin-left:18px\">欢迎下次光临</h4>";
                                body += "<h4 style=\"margin-top:10px;margin-left:25px\"></h4>";
                            }
                        }
                    });
                    body += "</div>";
                    //每一个都有</td>
                    body += "</td>";
                    if ((i + 1) % 6 == 0 || i == rst.length - 1)
                        body += "</tr>";

                });
                jQuery("#tbody").html(body);
            });
        }
        else if($("#sort-right").hasClass("active")){//按状态排序

            jQuery.post("/room_all",function (rst) {//处理响应的结果
                var body = "";
                var counter=0;//计数器
                //一---只输出 空闲
                for (var i = 0; i < rst.length; i++) {

                    var json = rst[i];
                    // alert(json.room_num);
                    //获得当前选择得日期
                    var time_in = $("#date_input").val();
                    var day=time_in.split("-")[2]
                    var month=time_in.split("-")[1]
                    var year=time_in.split("-")[0]
                    //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
                    var nowDate = new Date();
                    var nowDay = nowDate.getDate();
                    var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
                    var nowYear = nowDate.getFullYear();

                    //比较时间
                    var flag="";
                    if(year<nowYear)
                        flag="before";
                    else if(year>nowYear)
                        flag="after";
                    else{//年份相等
                        if(month<nowMonth)
                            flag="before";
                        else if(month>nowMonth)
                            flag="after";
                        else{//月份也相等
                            if(day<nowDay)
                                flag="before";
                            else if(day>nowDay)
                                flag="after";
                            else
                                flag="now";
                        }
                    }
                    //获得表格索引名称
                    var num = json.room_num;
                    var tableName = "t_" + num + "_info";
                    // alert(num);
                    //async:false是设置同步访问
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/roomstatus_findbydate",
                        dataType: "json",
                        data: {"tableName": tableName, "time_in": time_in},
                        success: function (mmm) { // 请求成功时的回调函数
                            //如果为空，即对应日期没有预定或入住
                            if (mmm.roomStatus == "空闲") {
                                if(i==0)
                                    roomStatus(json.room_num);//初始化右侧栏

                                if (counter % 6 == 0)//七个方块一行
                                    body += "<tr height=\"120px\">";
                                body += "<td>";
                                body += "<div class=\"room\" style=\"margin-left:5px;\">";


                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/白方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:35px\">空闲</h3>";
                                //日期不同，按钮可能不可用
                                if(flag=="before"){//不能预定，不能入住
                                    body += "<button type='button'  disabled='disabled' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button'  disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }else if(flag=="now"){//可以预定，可以入住
                                    body += "<button type='button'  class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button'  class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }else if(flag=="after"){//可以预定，不可入住
                                    body += "<button type='button' class='btn btn-info' id='" + num + "_yuding' style='font-size:13px;margin-left:6px;margin-top:10px;' onclick='showRuzhuModel(this.id)'>预定</button>";
                                    body += "<button type='button' disabled='disabled' class='btn btn-info btn_ruzhu' id='" + num + "_ruzhu' style='font-size:13px;margin-top:10px;margin-left:6px;' onclick='showRuzhuModel(this.id)'>入住</button>";
                                }

                                body += "</div>";
                                //每一个都有</td>
                                body += "</td>";
                                if ((counter + 1) % 6 == 0 || counter == rst.length - 1)
                                    body += "</tr>";

                                counter++;
                            }
                        }
                    });
                }

                //二---只输出已预定
                for (var i = 0; i < rst.length; i++) {

                    var json = rst[i];
                    // alert(json.room_num);
                    //获得当前选择得日期
                    var time_in = $("#date_input").val();
                    var day=time_in.split("-")[2]
                    var month=time_in.split("-")[1]
                    var year=time_in.split("-")[0]
                    //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
                    var nowDate = new Date();
                    var nowDay = nowDate.getDate();
                    var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
                    var nowYear = nowDate.getFullYear();

                    //比较时间
                    var flag="";
                    if(year<nowYear)
                        flag="before";
                    else if(year>nowYear)
                        flag="after";
                    else{//年份相等
                        if(month<nowMonth)
                            flag="before";
                        else if(month>nowMonth)
                            flag="after";
                        else{//月份也相等
                            if(day<nowDay)
                                flag="before";
                            else if(day>nowDay)
                                flag="after";
                            else
                                flag="now";
                        }
                    }
                    //获得表格索引名称
                    var num = json.room_num;
                    var tableName = "t_" + num + "_info";
                    // alert(num);
                    //async:false是设置同步访问
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/roomstatus_findbydate",
                        dataType: "json",
                        data: {"tableName": tableName, "time_in": time_in},
                        success: function (mmm) { // 请求成功时的回调函数
                            if (mmm.roomStatus == "已预定") {
                                if(i==0)
                                    roomStatus(json.room_num);//初始化右侧栏

                                if (counter % 6 == 0)//七个方块一行
                                    body += "<tr height=\"120px\">";
                                body += "<td>";
                                body += "<div class=\"room\" style=\"margin-left:5px;\">";

                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/粉方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已预定</h3>";
                                //日期不同，按钮可能不可用
                                if(flag=="now")//当天可入住,其余时间不可入住
                                    body += "<button type='button' class='btn btn-info' id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";
                                else
                                    body += "<button type=\"button\" disabled='disabled' class=\"btn btn-info\" id='" + num + "_ruzhu2' style='font-size:13px;margin-left:35px;margin-top:10px;' onclick='showYudingModel(this.id)'>入住</button>";


                                body += "</div>";
                                //每一个都有</td>
                                body += "</td>";
                                if ((counter + 1) % 6 == 0 || counter == rst.length - 1)
                                    body += "</tr>";

                                counter++;
                            }
                        }
                    });

                }
                //三--------只输出已入住
                for (var i = 0; i < rst.length; i++) {

                    var json = rst[i];
                    // alert(json.room_num);
                    //获得当前选择得日期
                    var time_in = $("#date_input").val();
                    var day=time_in.split("-")[2]
                    var month=time_in.split("-")[1]
                    var year=time_in.split("-")[0]
                    //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
                    var nowDate = new Date();
                    var nowDay = nowDate.getDate();
                    var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
                    var nowYear = nowDate.getFullYear();

                    //比较时间
                    var flag="";
                    if(year<nowYear)
                        flag="before";
                    else if(year>nowYear)
                        flag="after";
                    else{//年份相等
                        if(month<nowMonth)
                            flag="before";
                        else if(month>nowMonth)
                            flag="after";
                        else{//月份也相等
                            if(day<nowDay)
                                flag="before";
                            else if(day>nowDay)
                                flag="after";
                            else
                                flag="now";
                        }
                    }
                    //获得表格索引名称
                    var num = json.room_num;
                    var tableName = "t_" + num + "_info";
                    // alert(num);
                    //async:false是设置同步访问
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/roomstatus_findbydate",
                        dataType: "json",
                        data: {"tableName": tableName, "time_in": time_in},
                        success: function (mmm) { // 请求成功时的回调函数
                            if (mmm.roomStatus == "已入住") {
                                if(i==0)
                                    roomStatus(json.room_num);//初始化右侧栏
                                if (counter % 6 == 0)//七个方块一行
                                    body += "<tr height=\"120px\">";
                                body += "<td>";
                                body += "<div class=\"room\" style=\"margin-left:5px;\">";

                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/蓝方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已入住</h3>";
                                //啥收都可以结账
                                body += "<button type=\"button\" class=\"btn btn-info\" style=\"font-size:13px;margin-left:35px;margin-top:10px;\">退房</button>";

                                body += "</div>";
                                //每一个都有</td>
                                body += "</td>";
                                if ((counter + 1) % 6 == 0 || counter == rst.length - 1)
                                    body += "</tr>";

                                counter++;

                            }

                        }
                    });

                }
                //四------只输出已结账
                for (var i = 0; i < rst.length; i++) {

                    var json = rst[i];
                    // alert(json.room_num);
                    //获得当前选择得日期
                    var time_in = $("#date_input").val();
                    var day=time_in.split("-")[2]
                    var month=time_in.split("-")[1]
                    var year=time_in.split("-")[0]
                    //获取实际日期------>与上述日期比较,不是当天不可以办理入住，过去的不可以预约，
                    var nowDate = new Date();
                    var nowDay = nowDate.getDate();
                    var nowMonth = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
                    var nowYear = nowDate.getFullYear();

                    //比较时间
                    var flag="";
                    if(year<nowYear)
                        flag="before";
                    else if(year>nowYear)
                        flag="after";
                    else{//年份相等
                        if(month<nowMonth)
                            flag="before";
                        else if(month>nowMonth)
                            flag="after";
                        else{//月份也相等
                            if(day<nowDay)
                                flag="before";
                            else if(day>nowDay)
                                flag="after";
                            else
                                flag="now";
                        }
                    }
                    //获得表格索引名称
                    var num = json.room_num;
                    var tableName = "t_" + num + "_info";
                    // alert(num);
                    //async:false是设置同步访问
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/roomstatus_findbydate",
                        dataType: "json",
                        data: {"tableName": tableName, "time_in": time_in},
                        success: function (mmm) { // 请求成功时的回调函数

                            if (mmm.roomStatus == "已结账") {
                                if(i==0)
                                    roomStatus(json.room_num);//初始化右侧栏

                                if (counter % 6 == 0)//七个方块一行
                                    body += "<tr height=\"120px\">";
                                body += "<td>";
                                body += "<div class=\"room\" style=\"margin-left:5px;\">";

                                body += "<img src=\"/src/main/webapp/staticin/webapp/static/img/灰方块.png\" class=\"img-rounded\" width=\"120\" height=\"120\" id='" + num + "_status' onclick='roomStatus(this.id)'>";
                                body += "<h3 style=\"margin-top:-110px;margin-left:30px\">";
                                body += num;
                                body += "</h3>";
                                body += "<h3 style=\"margin-top:5px;margin-left:25px\">已结账</h3>";
                                body += "<h4 style=\"margin-top:20px;margin-left:25px\">欢迎下次光临</h4>";

                                body += "</div>";
                                //每一个都有</td>
                                body += "</td>";
                                if ((counter + 1) % 6 == 0 || counter == rst.length - 1)
                                    body += "</tr>";

                                counter++;
                            }
                        }
                    });
                }
                //四次循环后
                jQuery("#tbody").html(body);
            });
        }
    }

    var roomId;
    //点击空闲房间的按钮后出现界面
    function showRuzhuModel(id) {//id  (A101_ruzhu)
        if(id.split("_")[1]=="ruzhu")
            jQuery('#ruzhuModal').modal("show");
        else//id  (A101_yuding)
            jQuery('#yudingModal').modal("show");
        roomId=id.split("_")[0];//返回A101
        // alert(roomId);
    }

    //入住/预定的提交按钮
    function regModel(id) {
        var name;
        var tel;
        var sex;
        var ID;
        var isVip;
        var deposit;//押金

        var roomStatus="已预定"
        var alertC="";
        if(id=="btn_reg"){
            name=jQuery("#Roomername").val();
            tel=jQuery("#PhoneNumber").val();
            sex=jQuery("#sex").val();
            ID=jQuery("#IDNumber").val();
            isVip=jQuery("#isVip").val();
            deposit=jQuery("#deposit").val();//押金

            roomStatus="已入住";
            alertC="入住信息填写成功！";
        }
        else if(id=="btn_reg_yu"){
            name=jQuery("#Roomername_yu").val();
            tel=jQuery("#PhoneNumber_yu").val();
            sex=jQuery("#sex_yu").val();
            ID=jQuery("#IDNumber_yu").val();
            isVip=jQuery("#isVip_yu").val();
            deposit=jQuery("#deposit_yu").val();//押金

            roomStatus="已预定";
            alertC="预定信息填写成功！";
        }

        //检测一下是否有该房客
        jQuery.post("/roomer_findByIdCard",{"idNumber":ID},function (roomer) {
            if(roomer.roomer_idnumber==null)
                jQuery.ajax({type:"POST",async:false,url:"/roomer_save",data:{"name":name,"tel":tel,"sex":sex,"idNumber":ID,"isVip":isVip}, complete:function(rst) {
                    }});
        });

        var time_in=jQuery("#date_input").val();
        var tableName="t_"+roomId+"_info";//表名s
        jQuery.ajax({type:"POST",async:false,url:"/roomstatus_save",data:{"tableName":tableName,"roomStatus":roomStatus,"time_in":time_in,"roomer_id":ID,"deposit":deposit}, success:function(rst) {
                sort();
                alert(alertC);
            }
        });
        //清空信息
        jQuery("#Roomername").val("");
        jQuery("#PhoneNumber").val("");
        jQuery("#sex").val("男");
        jQuery("#IDNumber").val("");
        jQuery("#isVip").val("否");
        jQuery("#deposit").val("");//押金
        jQuery("#Roomername_yu").val("");
        jQuery("#PhoneNumber_yu").val("");
        jQuery("#sex_yu").val("男");
        jQuery("#IDNumber_yu").val("");
        jQuery("#isVip_yu").val("否");
        jQuery("#deposit_yu").val("");//押金
        jQuery("#yudingText").val("");
        jQuery("#ruzhuText").val("");

        jQuery("#Roomername").attr("disabled", false);
        jQuery("#PhoneNumber").attr("disabled", false);
        jQuery("#sex").attr("disabled", false);
        jQuery("#IDNumber").attr("disabled", false);
        jQuery("#isVip").attr("disabled", false);
        jQuery("#deposit").attr("disabled", false);//押金
        jQuery("#Roomername_yu").attr("disabled", false);
        jQuery("#PhoneNumber_yu").attr("disabled", false);
        jQuery("#sex_yu").attr("disabled", false);
        jQuery("#IDNumber_yu").attr("disabled", false);
        jQuery("#isVip_yu").attr("disabled", false);
        jQuery("#deposit_yu").attr("disabled", false);//押金
    }
    //填入信息的快捷键，检索身份证idcard
    function search(id){
        if(id=="ruzhuSearch"){
            var idCard=jQuery("#ruzhuText").val();
            jQuery.post("/roomer_findByIdCard",{"idNumber":idCard},function (roomer) {
                if(roomer.roomer_idnumber==null)
                {
                    //清空
                    jQuery("#Roomername").val("");
                    jQuery("#Roomername").attr("disabled",false);
                    jQuery("#PhoneNumber").val("");
                    jQuery("#PhoneNumber").attr("disabled", false);
                    jQuery("#sex").val("");
                    jQuery("#sex").attr("disabled", false);
                    jQuery("#IDNumber").val("");
                    jQuery("#IDNumber").attr("disabled", false);
                    jQuery("#isVip").val("");
                    jQuery("#isVip").attr("disabled", false);
                    jQuery("#deposit").val("");
                    jQuery("#deposit").attr("disabled", false);
                    alert("未找到该房客信息，请填写入住信息表！");
                }

                else{
                    jQuery("#Roomername").val(roomer.roomer_name);
                    jQuery("#Roomername").attr("disabled", "disabled");
                    jQuery("#PhoneNumber").val(roomer.roomer_tel);
                    jQuery("#PhoneNumber").attr("disabled", "disabled");
                    jQuery("#sex").val(roomer.roomer_sex);
                    jQuery("#sex").attr("disabled", "disabled");
                    jQuery("#IDNumber").val(roomer.roomer_idnumber);
                    jQuery("#IDNumber").attr("disabled", "disabled");
                    jQuery("#isVip").val(roomer.roomer_isvip);
                    jQuery("#isVip").attr("disabled", "disabled");
                    //押金不需要填
                    // jQuery("#deposit_yu").val();//押金
                }
            });
        }
        else if(id=="yudingSearch"){
            var idCard=jQuery("#yudingText").val();
            jQuery.post("/roomer_findByIdCard",{"idNumber":idCard},function (roomer) {
                if(roomer.roomer_idnumber==null){
                    //清空
                    jQuery("#Roomername_yu").val("");
                    jQuery("#Roomername_yu").attr("disabled",false);
                    jQuery("#PhoneNumber_yu").val("");
                    jQuery("#PhoneNumber_yu").attr("disabled", false);
                    jQuery("#sex_yu").val("");
                    jQuery("#sex_yu").attr("disabled", false);
                    jQuery("#IDNumber_yu").val("");
                    jQuery("#IDNumber_yu").attr("disabled", false);
                    jQuery("#isVip_yu").val("");
                    jQuery("#isVip_yu").attr("disabled", false);
                    jQuery("#deposit_yu").val("");
                    jQuery("#deposit_yu").attr("disabled", false);
                    alert("未找到该房客信息，请填写入住信息表！");
                }
                else{
                    jQuery("#Roomername_yu").val(roomer.roomer_name);
                    jQuery("#Roomername_yu").attr("disabled", "disabled");
                    jQuery("#PhoneNumber_yu").val(roomer.roomer_tel);
                    jQuery("#PhoneNumber_yu").attr("disabled", "disabled");
                    jQuery("#sex_yu").val(roomer.roomer_sex);
                    jQuery("#sex_yu").attr("disabled", "disabled");
                    jQuery("#IDNumber_yu").val(roomer.roomer_idnumber);
                    jQuery("#IDNumber_yu").attr("disabled", "disabled");
                    jQuery("#isVip_yu").val(roomer.roomer_isvip);
                    jQuery("#isVip_yu").attr("disabled", "disabled");
                    //押金不需要填
                    // jQuery("#deposit_yu").val();//押金
                }
            });
        }

    }

    var roomId2;
    //点击已预定房间的入住按钮后出现界面
    function showYudingModel(id) {//id  (A101_ruzhu2)

        jQuery('#yudingModal2').modal("show");
        roomId2=id.split("_")[0];//返回A101
        // alert(roomId2);

        var tableName="t_"+roomId2+"_info";
        var time_in=jQuery("#date_input").val();
        jQuery.post("/roomstatus_findbydate",{"tableName":tableName,"time_in":time_in},function (room) {
            //获取押金
            jQuery("#deposit_yu2").val(room.deposit);//填入押金
            // alert(room.deposit);
            jQuery("#deposit_yu2").attr("disabled", "disabled");
            var idCard=room.roomer_id;
            // alert(idCard);
            //访问roomer
            jQuery.post("/roomer_findByIdCard",{"idNumber":idCard},function (roomer) {
                jQuery("#Roomername_yu2").val(roomer.roomer_name);
                jQuery("#Roomername_yu2").attr("disabled", "disabled");
                jQuery("#PhoneNumber_yu2").val(roomer.roomer_tel);
                jQuery("#PhoneNumber_yu2").attr("disabled", "disabled");
                jQuery("#sex_yu2").val(roomer.roomer_sex);
                jQuery("#sex_yu2").attr("disabled", "disabled");
                jQuery("#IDNumber_yu2").val(roomer.roomer_idnumber);
                jQuery("#IDNumber_yu2").attr("disabled", "disabled");
                jQuery("#isVip_yu2").val(roomer.roomer_isvip);
                jQuery("#isVip_yu2").attr("disabled", "disabled");
                //押金不需要填
                // jQuery("#deposit_yu").val();//押金
            });
        });
    }

    //预定转入住
    function yudingToruzhu(){

        var roomer_idnumber=jQuery("#IDNumber_yu2").val();
        var deposit=jQuery("#deposit_yu2").val();//获取信息

        var tableName="t_"+roomId2+"_info";
        var time_in=jQuery("#date_input").val();
        //更新下房间信息
        jQuery.ajax({type:"POST",async:false,url:"/roomstatus_editbydate",data:{"tableName":tableName,"roomStatus":"已入住","time_in":time_in,"roomer_id":roomer_idnumber,"deposit":deposit}, success:function(rst) {
                sort();
                alert('预定转入住成功');
            }
        });
    }

    var roomId3;
    //退房按钮
    function showTuifangModel(id){//id 为  A101_tuifang
        jQuery('#tuifangModal').modal("show");
        roomId3=id.split("_")[0];//返回A101
        // alert(roomId3)

        var table="";//记录 消费账单表格  的动态生成语句

        //获取房间类型
        var roomtype="";
        //同步请求
        jQuery.ajax({type:"POST",async:false,dataType:"json",url:"/room_findbynum",data:{"num":roomId3}, success:function(room) {
                // jQuery.post("/room_findbynum",{"num":roomId3},function (room) {
                roomtype=room.room_type;
                // alert(roomtype);
            }});
        //获取价格
        var price="";
        jQuery.ajax({type:"POST",async:false,dataType:"json",url:"/roomtype_findbytype",data:{"type":roomtype}, success:function(type) {
                // jQuery.post("/roomtype_findByType",{"type":roomtype},function (type) {
                price=type.type_price;
            }});

        //把房间信息录入到第一行
        table+="<tr>";
        table+="<th scope='row'>1</th>";
        table+="<td>"+roomtype+"</td>";
        table+="<td>"+price+"</td>";
        table+="<td>1</td>" ;
        table+="<td>"+price+"</td>";
        table+="</tr>";

        var allPrice=parseInt(price);//消费总金额，初值为房间价格
        //数据库表名
        var tableBuyName="t_"+roomId3+"buy_info"
        //自动填写内容
        jQuery.ajax({type:"POST",async:false,dataType:"json",url:"/buy_all",data:{"tableBuyName":tableBuyName}, success:function(goods) {
                // jQuery.post("/buy_all",{"tableBuyName":tableBuyName},function (goods) {
                //先检测是否查到数据
                if(goods[0].id=="未找到"){//未找到

                }else{
                    // 遍历消费表
                    for(var i=0;i<goods.length;i++){
                        var good=goods[i];
                        table+="<tr>";
                        table+="<th scope='row'>"+(i+2)+"</th>";
                        table+="<td>"+good.buy_goods+"</td>";
                        table+="<td>"+good.goods_price+"</td>";
                        table+="<td>"+good.buy_num+"</td>" ;
                        var thePrice=parseInt(good.goods_price)*parseInt(good.buy_num);//单个商品总价
                        allPrice+=thePrice;//所有商品总价
                        table+="<td>"+thePrice+"</td>";
                        table+="</tr>";
                    }
                }

            }});
        jQuery("#tuifangTable").html(table);

        var deposit;//押金
        var roomerId;//房客的IDCard
        //修改消费总金额
        jQuery("#tuifangNum").val(allPrice);//填入消费总金额
        //修改押金


        var tableName = "t_" + roomId3 + "_info";
        // alert(tableName);
        var time_in=jQuery("#date_input").val();
        // alert(time_in);
        //async:false是设置同步访问
        jQuery.ajax({type: "POST", async: false,url: "/roomstatus_findbydate",dataType: "json",data: {"tableName": tableName, "time_in": time_in},
            success: function (mmm) {
                deposit=parseInt(mmm.deposit);
                roomerId=mmm.roomer_id;
                jQuery("#tuifangDeposit").val(deposit);//填入押金
            }
        });

        //修改房客姓名，是否为会员
        var isVip;

        jQuery.ajax({type: "POST", async: false,url: "/roomer_findByIdCard",dataType: "json",data: {"idNumber":roomerId},success: function (mmm) {

                isVip=mmm.roomer_isvip;
                // alert(isVip);
                jQuery("#tuifangName").val(mmm.roomer_name);//填入姓名
                jQuery("#tuifangIsVip").val(isVip);//填入IsVip
            }
        });

        //计算下实际应付金额
        if(isVip=="是")
            allPrice=allPrice*0.9;//会员打9折


        var body="";// 记录  应付金额的动态填入语句
        body+="<div class='form-inline form-group form-group-lg'>";
        body+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        body+="<div class='input-group col-lg-5'>";
        body+="<span class='input-group-addon'>实际应付金额：</span>";
        body+="<input type='text' class='form-control' disabled='true' value='"+allPrice+"' aria-describedby='sizing-addon2'>";
        body+="</div>";
        body+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        if(allPrice>deposit){//房客应该补交
            body+="<div class='input-group col-lg-5'>";
            body+="<span class='input-group-addon'>应追加付款：</span>";
            body+="<input type='text' class='form-control' disabled='true' value='"+parseFloat(allPrice-deposit).toFixed(1)+"'aria-describedby='sizing-addon2'>";
            body+="</div>";
            body+="</div>";
        }
        else{//应该退钱给房客
            body+="<div class='input-group col-lg-5'>";
            body+="<span class='input-group-addon'>应退还金额：</span>";
            body+="<input type='text' class='form-control' disabled='true' value='"+(deposit-allPrice)+"' aria-describedby='sizing-addon2'>";
            body+="</div>";
            body+="</div>";
        }

        jQuery("#tuifang-btn").html(body);

    }

    //点击退房的确定按钮会清空数据表
    function clearBuy(){
        jQuery.post("/buy_clear", {"tableBuyName": "t_"+roomId3+"buy_info"}, function (rst) {
            // alert("clear");
        });

        var tableName="t_"+roomId3+"_info";
        var date = $("#date_input").val();//所选日期
        var roomer_idnumber;
        var deposit;

        jQuery.ajax({type:"POST",async:false,url:"/roomstatus_findbydate",data:{"tableName":tableName,"time_in":date}, success:function(rst) {
                deposit=parseInt(rst.deposit);
                roomer_idnumber=rst.roomer_id;
            }
        });
        jQuery.ajax({type:"POST",async:false,url:"/roomstatus_editbydate",data:{"tableName":tableName,"roomStatus":"已结账","time_in":date,"roomer_id":roomer_idnumber,"deposit":deposit}, success:function(rst) {
                sort();
                alert('退房成功');
            }
        });
    }

    var roomId4;//用于提供给 下面三个函数 "a202"

    //右侧信息栏
    //传入参数 num = "a202";
    function roomStatus(num) {
        roomId4=num.split("_")[0];
        num=roomId4;

        //需要获取一下
        var date = $("#date_input").val();//所选日期

        //仅有当天的账单
        //获取实际日期------>
        var nowDate = new Date();
        var day = nowDate.getDate();
        var month = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
        var year = nowDate.getFullYear();
        var CurrentDate = year+"-"+(month<10?"0"+month:month)+"-"+(day<10?"0"+day:day);

        if(date==CurrentDate) {
            jQuery.post("/buy_all", {"tableBuyName": "t_" + num + "buy_info"}, function (rst) {   <!--显示购买信息-->
                var body = "";
                var sum = 0;
                if(rst[0].id!="未找到"){
                    for (var i = 0; i < rst.length; i++) {
                        var json = rst[i];
                        body += "<tr>";
                        body += "<td>" + json.id + "</td>";
                        body += "<td>" + json.buy_goods + "</td>";
                        body += "<td>" + json.goods_price + "</td>";
                        body += "<td>" + json.buy_num + "</td>";
                        body += "<td>" + (json.goods_price) * (json.buy_num) + "</td>";
                        body += "</tr>";
                        sum += (json.goods_price) * (json.buy_num);
                    }
                }
                jQuery("#buyList").html(body);
                jQuery("#total").html(sum);
            }, "json");
        }else{
            jQuery("#buyList").html("");
            jQuery("#total").html(0);
        }

        jQuery.post("/roomstatus_findbydate", {"tableName": "t_" + num + "_info", "time_in": date}, function (rst) {
            var json = rst;
            if(json.roomStatus=="空闲")
            {
                jQuery("#r_state").html(json.roomStatus);
                jQuery("#r_num").html(num);

                jQuery("#r_time_in").html("");
                jQuery("#r_time_out").html("");
                jQuery("#r_deposit").html("");
                jQuery("#r_name").html("");

            }else{
                jQuery("#r_num").html(num);
                jQuery("#r_state").html(json.roomStatus);

                jQuery("#r_time_in").html(json.time_in);
                jQuery("#r_time_out").html(json.time_out);
                jQuery("#r_deposit").html(json.deposit);
                jQuery.post("/roomer_findByIdCard",{"idNumber":json.roomer_id},function (roomer) {
                    jQuery("#r_name").html(roomer.roomer_name);
                });
            }

        }, "json");

        jQuery.post("/room_findbynum", {"num": num}, function (rst) {

            var json = rst;
            jQuery("#r_type").html(json.room_type);
            jQuery("#r_place").html(json.room_floor);

        }, "json");
    }

    //点击继续购买
    function showBuyModel() {
        jQuery.post("/goods_all", function (rst) {
            var body = "";
            for (var i = 0; i < rst.length; i++) {
                var json = rst[i];
                body += "<tr >";
                body += "<td>" + json.id + "</td>";
                body += "<td>" + json.goods_name + "</td>";
                body += "<td>" + json.goods_price + "</td>";
                body += "<td>" + json.goods_type + "</td>";
                body += "<td>" + "<input type='text' class='input-sm' value='0' id='" + i + "'>" + "</td>";
                body += "</tr>";

            }
            jQuery("#goodsinfo").html(body);
        }, "json");

        jQuery('#buyModal').modal("show");
    }

    //点击继续购买后的确认按钮
    function cashier() {
        var num=roomId4;//"a101"

        jQuery('#buyModal').modal("hide");
        jQuery.post("/goods_all", function (rst) {

            var goods;
            var price;
            var buynum;
            var buyid;

            for (var i = 0; i < rst.length; i++) {
                var json = rst[i];

                buynum = jQuery("#" + i + "").val();
                if (buynum > 0) {
                    goods = json.goods_name;
                    price = json.goods_price;

                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/buy_findByName",
                        dataType: "json",
                        data: {"tableBuyName": "t_" + num + "buy_info", "goods": goods},
                        success: function (rst0) {
                            if (rst0.goods == "空")//说明没找到 需要新建一个
                            {
                                jQuery.post("/buy_save", {
                                    "tableBuyName": "t_" + num + "buy_info",
                                    "goods": goods,
                                    "price": price,
                                    "num": buynum
                                }, function (editRst) {

                                    if (editRst == "添加成功") {
                                        roomStatus(num);
                                    }

                                });
                            }
                            //现在找到了 需要记录id然后修改
                            buyid = rst0.id;
                            var allnum = parseInt(buynum) + parseInt(rst0.buy_num);
                            jQuery.post("/buy_edit", {
                                "tableBuyName": "t_" + num + "buy_info",
                                "id": buyid,
                                "goods": goods,
                                "price": price,
                                "num": allnum
                            }, function (rst1) {
                                if (rst1 == "修改成功") {
                                    roomStatus(num);
                                }
                            });
                        }
                    });

                    //更新商品存货--先获取,然后更新
                    jQuery.ajax({
                        type: "POST",
                        async: false,
                        url: "/goods_findByName",
                        dataType: "json",
                        data: {"name": goods},
                        success: function (mmm) {
                            var price=mmm.goods_price;
                            var num=parseInt(mmm.goods_number)-buynum;
                            var type=mmm.goods_type;
                            var id=mmm.id;
                            //现在找到了 需要记录id然后修改

                            jQuery.post("/goods_edit", {
                                "id": id,
                                "name": goods,
                                "price": price,
                                "number": num,
                                "type":type
                            }, function (rst1) {

                            });
                        }
                    });
                }
            }
        });



    }



    //脚本主函数
    jQuery(function(){
        //初始化创建
        init();

        //当按房间号排序被选中
        jQuery("#sort-left").click(function () {
            $("#sort-left").removeClass("btn-default");
            $("#sort-left").addClass("btn-info active");

            $("#sort-right").removeClass("btn-info active");
            $("#sort-right").addClass("btn-default");

            sort();

        });
        //当按状态排序被选中
        jQuery("#sort-right").click(function () {
            $("#sort-right").removeClass("btn-default");
            $("#sort-right").addClass("btn-info active");

            $("#sort-left").removeClass("btn-info active");
            $("#sort-left").addClass("btn-default");

            sort();
        });


        //给date_input设置默认值为 当前日期
        var nowDate = new Date();
        var day = nowDate.getDate();
        var month = nowDate.getMonth()+1;//因为用0~11表示十二个月份，所以看到的值比实际小
        var year = nowDate.getFullYear();

        var CurrentDate = year+"-"+(month<10?"0"+month:month)+"-"+(day<10?"0"+day:day);
        $('#date_input').val(CurrentDate);
        // <!--date_input插件(官网：https://www.layui.com/laydate/)-->
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#date_input',//指定元素
                btns: ['now', 'confirm'],
                done: function(value){ //监听日期被切换
                    //执行函数
                    // $('#date_input').val(value);
                    //刷新主体
                    sort();
                }
            });
        });
        //第一次初始化
        sort();


    });

</script>
<!--导航栏脚本-->
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
        //…
    });
</script>
</html>
